<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒（伸缩盒）、弹性容器的样式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width:500px;
            height:800px;
            border:10px yellow solid;
            /*将ul设置为弹性容器*/
            display: flex;/*块级弹性容器*/
            /*flex-direction指定容器中弹性元素的排列方式(排列方向）*/
            /* flex-direction: row-reverse; */
           /* flex-direction: column; */
           /* flex-direction: column-reverse; */
           /* flex-wrap设置弹性元素是否自动换行*/
           /* flex-wrap:nowrap ; */
           /* justify-content: center; */
           /* justify-content: space-around; */
           /* justify-content: flex-end; */
           /* justify-content: flex-start; */
           /* justify-content: space-evenly; */
           /* justify-content: space-between;*/
            flex-flow: row wrap;
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            justify-content: center;
            align-items: center;
            align-content:flex-start ;
            align-content:flex-end ;
        } 
        li{
            width:200px;
            /* height:100px; */
            background-color: deepskyblue;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* float: left; 问题：浮动会带来高度塌陷*/
            /* flex-shrink指定弹性元素的收缩系数：*/
            /* flex-shrink: 0; */
        }
        /* li:nth-child(1){
            /* flex-grow: 1; 
            /* flex-shrink: 1; 
        } */
        li:nth-child(2){
            background-color: chartreuse;
            /* flex-grow: 2; */
            flex-shrink: 2;
        }
        li:nth-child(3){
            background-color: deeppink;
            /* flex-grow: 3; */
            flex-shrink: 3;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2
            <div>2</div>
        </li>
        <li>3
            <div>3</div>
            <div>3</div>
        </li>
    </ul>
    
</body>
</html>